<template>
    <div>
         <div class="accounthead">
            <span>关键字维护</span>
            <div class="newBtn" @click="openNewKey">+ 新建关键词</div>
        </div>

        <div class="searchbox">
            <el-input placeholder="请输入关键字" v-model="keyword" class="input-with-select searchInput" @keyup.native.enter="searchKeywordBtn">
                <el-button slot="append" icon="el-icon-search" class="searchBtn" @click="searchKeywordBtn"></el-button>
            </el-input>
        </div>

    <!-- 这是新建关键词的代码 -->
    <el-dialog title="新建关键词" :visible.sync="UpdateFormVisible">
            <div class="modulediv">
                <div>关键字</div>
                <input type="text" class="moduleName" placeholder="常用模板" v-model="keywordName">
            </div>

            <div class="belongsto">
                <div class="belongtoText">
                    所属模板
                </div>
                 <transition name="el-fade-in">
                        <div @click="show = !show"  v-show="show" class="addmodelText">+ 添加所属模板</div>
                 </transition>
                <transition name="el-fade-in">
                    <div  v-show="!show">
                        <div class="allCheck"><el-checkbox v-model="Allchecked"  @change="changeAllCheck">全选</el-checkbox></div>
                        <div v-for="(item, index) in AllTemplateList" :key="index" class="checkBox">
                            <el-checkbox v-model="item.checked">{{item.name}}</el-checkbox>
                        </div>    
                    </div>
                </transition>
            </div>

            <div class="footBtn">
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="UpdateFormVisible = false">取 消</el-button>
                        <el-button type="danger" @click="newKeywordOk">保 存</el-button>
                    </div>
            </div>
    </el-dialog>

        <div class="table">
            <el-table
            align="center"
            ref="singleTable"
            :data="keywordList"
            style="width: 100%">
            <el-table-column
                align="center"
                prop="id"
                label="ID"
                width="80">
            </el-table-column>
            <el-table-column
                prop="content"
                label="关键词"
                width="180">
            </el-table-column>
            <el-table-column
                prop="Arr"
                label="所属模板"
                :show-overflow-tooltip="true"
                >
            </el-table-column>
            <el-table-column
                label="创建时间"
                width="280">
                 <template slot-scope="scope">
                        {{scope.row.insertTime | rowinsertTime}}
                    </template>
            </el-table-column>
            <el-table-column
                width="180">
                 <template slot-scope="scope">
                     <i class="el-icon-edit" @click="editkeywordPen(scope.row.Arr,scope.row.content,scope.row.id)"></i>
                      <!-- <svg version="1.1" class="penSvg penico" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                        viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve" @click="editkeywordPen(scope.row.Arr,scope.row.content,scope.row.id)">>
                     <rect x="-354.3" y="-271.1" class="st0" width="20" height="20"/>
                     <polygon class="st1" points="1.7,18.5 2.5,14.8 5.3,17.6 "/>
                     <g>
                        <path class="st1" d="M18.5,4.3l1-1c0.2-0.2,0.2-0.5,0-0.7l-2.1-2.1c-0.2-0.2-0.5-0.2-0.7,0l-1,1L18.5,4.3z"/>
                        <rect x="1.7" y="7.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -3.6929 10.2382)" class="st1" width="17.7" height="3.9"/>
                     </g>
                     </svg> -->


                     <i class="el-icon-delete" @click="deletekeywordlaji(scope.row.id)"></i>
                     <!-- <svg version="1.1" class="penSvg lajiico" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                        viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve" @click="deletekeywordlaji(scope.row.id)">
                    <path class="st0" d="M19.1,2.4h-3.5V1.2c0-0.6-0.4-1-1-1H5.3c-0.6,0-1,0.4-1,1v1.2H0.8c-0.4,0-0.7,0.4-0.7,0.8
                        c0,0.4,0.3,0.7,0.7,0.7h18.3c0.4,0,0.7-0.3,0.7-0.7C19.8,2.8,19.5,2.4,19.1,2.4L19.1,2.4z M16.3,5.4H3.6c-0.2,0-0.4,0-0.5,0.2
                        C3,5.7,2.9,5.9,2.9,6.1v11.7c0,1.2,1,2.1,2.1,2.1h9.9c1.2,0,2.1-1,2.1-2.1V6.1C17,5.7,16.7,5.4,16.3,5.4L16.3,5.4z M8.1,16.6
                        c0,0.4-0.3,0.7-0.7,0.7c-0.4,0-0.7-0.3-0.7-0.7V9c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7V16.6z M13.2,16.6
                        c0,0.4-0.3,0.7-0.7,0.7c-0.4,0-0.7-0.3-0.7-0.7V9c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7V16.6z M13.2,16.6"/>
                    <rect x="-354.3" y="-271.1" class="st1" width="13" height="13"/>
                    </svg> -->

                </template>
            </el-table-column>

            </el-table>
        </div>

        <div class="pagebox">
            <div class="block">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage3"
                :page-size="10"
                layout="total, prev, pager, next, jumper"
                :total= pagetotal>
                </el-pagination>
            </div>
        </div>

        <el-dialog title="编辑关键词" :visible.sync="UpdateKeyFormVisible">
            <div class="modulediv">
                <div>关键字</div>
                <!-- v-model="keywordName" -->
                <input type="text" class="moduleName" v-model="updatecontent" placeholder="常用模板">
            </div>

            <div class="belongsto">
                <div class="belongtoText">
                    所属模板
                </div>
                 <transition name="el-fade-in">
                        <div class="addmodelText">{{updateKetword}} <img  @click="show2 = !show2"  v-show="show2" src="../../assets/pen.png" class="penico" alt=""></div>
                        
                 </transition>
                <transition name="el-fade-in">
                    <div  v-show="!show2">
                        <div class="allCheck"><el-checkbox v-model="updatechecked"  @change="changeupdateCheck">全选</el-checkbox></div>
                        <div v-for="(item, index) in updateTemplateList" :key="index" class="checkBox">
                            <el-checkbox v-model="item.checked">{{item.name}}</el-checkbox>
                        </div> 
                    </div>
                </transition>
            </div>

        <div class="footBtn">
            <div slot="footer" class="dialog-footer">
                <el-button @click="UpdateKeyFormVisible = false">取 消</el-button>
                <el-button type="danger" @click="updateKeywordOk">保 存</el-button>
            </div>
        </div> 
        </el-dialog>

    </div>
</template>

<script>
import {getKeywordsList, getAllTemplate, addKeywords, deleteKeywords,getUpdateKeywords,UpdateKeywordsList} from '@/api'
export default {
    data () {
        return {
            keyword: '',
            keywordList: [],
            addKeyword: '',
            UpdateFormVisible: false,
            show: true,
            show2: true,
            pagenum: 1,
            pagetotal: 1,
            currentPage3: 5,
            Allchecked: false,
            AllTemplateList: [],  // 所有模板消息
            keywordName: '', // 新增关键词名称
            UpdateKeyFormVisible: false,
            updateKetword: '',
            updatecontent: '',
            updateTemplateList: [],
            updatechecked: false,
            updateTemplateid: 1
        }
    },
    // 过滤时间的过滤器
    filters: {
        rowinsertTime(insertTime)   {
            // console.log(insertTime)
            var now = new Date(insertTime)
            var year = now.getFullYear() 
            var month = now.getMonth() + 1// 月
            var day = now.getDate()// 日
              if (month < 10) {
                    month = '0' + month
                }
                if (day < 10) {
                    day = '0'+ day
                }
            return year+'/'+month+'/'+day
        }
    },
    mounted () {
        let opens = this.$route.query.open || ''
        if(opens == 'open') {
            this.UpdateFormVisible = true
        }
    this.initKeywordsList()
    },
    methods: {
        openNewKey() {
            this.UpdateFormVisible = true
            // this.AllTemplateList.checked = false;
            for(let i=0; i<this.AllTemplateList.length;i++) {
                this.AllTemplateList[i].checked = false;
            }
            this.keywordName = ''
        },
        changeupdateCheck() {
            if(this.updatechecked == true) {
                for(let i=0;i<this.updateTemplateList.length;i++) {
                   this.updateTemplateList[i].checked = true
                }
            } else if (this.updatechecked == false) {
                for(let i=0;i<this.AllTemplateList.length;i++) {
                    this.updateTemplateList[i].checked = false
                }
            }
        },
        // ckj 点击垃圾桶的时候
        deletekeywordlaji(id) {
            let obj = {
                id: id
            }
            this.$confirm('此操作将永久删除该关键字, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    // console.log(obj)
                    deleteKeywords(obj)
                    .then(res => {
                        // console.log(res)
                        if (res.statusCode == 200) {
                           this.initKeywordsList()
                             this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }
                    })
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
             })
        },
        // 点击笔的时候
        editkeywordPen(Arr, updatecontent, id) {
            this.updateTemplateid = id
            this.UpdateKeyFormVisible = true
            this.updateKetword = Arr
            this.updatecontent = updatecontent
            getUpdateKeywords(id)
            .then(res => {
                this.updateTemplateList = res.data.template
            })
        },
        handleSizeChange(val) {
        },
        handleCurrentChange(val) {
            this.pagenum = val
            this.initKeywordsList()
        },
        changeAllCheck() {
            if(this.Allchecked == true) {
                for(let i=0;i<this.AllTemplateList.length;i++) {
                   this.AllTemplateList[i].checked = true
                }
            } else if (this.Allchecked == false) {
                for(let i=0;i<this.AllTemplateList.length;i++) {
                    this.AllTemplateList[i].checked = false
                }
            }
        },
        updateKeywordOk() {
            let updateTemplateList = this.updateTemplateList
            let updatetemplateids = ""
            for(let i=0;i<updateTemplateList.length;i++) {
                if(updateTemplateList[i].checked == true) {
                    updatetemplateids += updateTemplateList[i].id + '+'
                }
            }
              updatetemplateids = updatetemplateids.substring(0, updatetemplateids.length - 1)
              let obj = {
                  id: this.updateTemplateid,
                  content: this.updatecontent,
                  templateids: updatetemplateids
              }
              if(obj.content ===''){
                   this.$message({
                        message: '请输入关键词',
                        type: 'warning'
                    });
                    return false
              }
              if(obj.templateids ===''){
                   this.$message({
                        message: '至少选择一个模板',
                        type: 'warning'
                    });
                    return false
              }
            UpdateKeywordsList(obj)
            .then(res => {
                // console.log(res)
                 if(res.statusCode == 200) {
                      this.$message({
                        message: res.statusMsg,
                        type: 'success'
                    })
                        this.initKeywordsList()
                        this.UpdateKeyFormVisible = false
                  } else {
                      this.$message({
                        message: res.statusMsg,
                        type: 'error'
                    })
                  }
            })
        },
        newKeywordOk() {
            // console.log(123)、
            let AllTemplateList = this.AllTemplateList
            let templateids = ""
            for(let i=0;i<AllTemplateList.length;i++) {
                // console.log(AllTemplateList[i].checked)
                if(AllTemplateList[i].checked == true) {
                    // console.log(AllTemplateList[i].id)
                    templateids += AllTemplateList[i].id + '+'
                }
            }
              templateids = templateids.substring(0, templateids.length - 1)
            //   console.log(templateids)
              let obj = {
                  content: this.keywordName,
                  templateids: templateids
              }
            //   console.log(obj)
              if(obj.content ===''){
                   this.$message({
                        message: '请输入关键词',
                        type: 'warning'
                    });
                    return false
              }
               if(obj.templateids ===''){
                     this.$message({
                        message: '至少选择一个模板',
                        type: 'warning'
                    });
                    return false
              }
            //   console.log(obj)
              addKeywords(obj)
              .then(res => {
                //   console.log(res)
                  if(res.statusCode == 200) {
                      this.$message({
                        message: res.statusMsg,
                        type: 'success'
                        })
                         this.UpdateFormVisible = false
                  }
              })
        },
        topagenumbtn() {
            if(this.pagenum>this.pagetotal) {
               this.pagenum = 1
                return false;
            }
            this.initKeywordsList()  
        },
        nextpage() {
        //    console.log(this.pagenum)
        //    console.log(this.pagetotal)
            if(this.pagenum>=this.pagetotal) {
                return false;
            }
            this.pagenum = this.pagenum + 1
            this.initKeywordsList()  
        },
        // ckj 用pageNum,pageSize获取关键字列表以及模糊搜索
        initKeywordsList() {
            let obj = {
                pageNum:  this.pagenum,
                pageSize: 10,
                content: this.keyword
            }
            // console.log(obj)
            getKeywordsList(obj)
            .then(res => {
                // console.log(res)
                this.pagetotal = res.data.total
                this.keywordList = res.data.list

                let key = ""
                // console.log(res.data.list)
                for(let i=0;i<this.keywordList.length;i++) {
                    this.keywordList[i].Arr = ""
                    for(let j=0;j<this.keywordList[i].template.length;j++) {
                        if(j==this.keywordList[i].template.length-1) {
                            this.keywordList[i].Arr += this.keywordList[i].template[j].name
                        }else {
                            this.keywordList[i].Arr += this.keywordList[i].template[j].name + "/"
                        }
                    }
                }
                // console.log(key)
            }),
             getAllTemplate()
            .then(res => {
                // console.log(res)
                this.AllTemplateList = res.data.list
                // console.log(this.AllTemplateList)
            })
            },
            // ckj 点击搜索的时候再发一次请求
            searchKeywordBtn () {
                this.pagenum = 1
                this.initKeywordsList()
            }
    }

}
</script>

<style lang="scss" scoped>
.penico {
    width: 13px;
    height: 13px;
}
.checkBox {
    float: left;
    margin-right: 20px;
}
.allCheck {

}
.el-icon-edit {
    margin-right: 30px;
}
.newBtn {
        display: inline;
        float: right;
        border:1px solid rgba(64,131,231,1);
        border-radius:8px;
        width: 109px;
        height: 30px;
        line-height: 30px;
        margin-right: 44px;
        text-align: center;
        margin-top: 20px;
        font-size: 16px;
        color: #4083E7;
        cursor: pointer;
    }


.accounthead {
        position: relative;
        text-align: left;
        width: 100%;
        height: 70px;
        background-color: #fff;
        font-size: 22px;
        line-height: 86px;
        // border-bottom: 1px solid #ccc;
        img {
            margin-left: 20px;
        }
        span {
            position: absolute;
            bottom: -9px;
            left: 60px;
            // margin-bottom: 10px;
            // margin-left: 19px;
        }
    }
    .searchbox{
         height: 40px;
         background-color: #fff;
        position: relative;
        .searchInput {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            margin: 0 auto;
            width: 327px;
        }
        .searchBtn {
            // background-color: #BFBFBF;
            background-color: #f5f7fa;
        }
    }


    .modulediv {
        text-align: left;
        font-size: 20px;
        border-radius: 8px;
        .moduleName {
        text-indent: 1em;
        width: 265px;
        height: 32px;
        }
    }

    .belongsto  {
        text-align: left;
        width: 100%;
        // height: 250px;
        .belongtoText {
            font-size: 20px;
        }
        .addmodelText {
            cursor: pointer;
        }
    }

    .footBtn {
        width: 100%;
        height: 42px;
        margin-top: 188px;
        text-align: right;
    }

    .pagebox {
        width: 100%;
        height: 48px;
        background-color: #fff;
    }
    .page {
        background: #fff;
        float: right;
        .pageInput {
            margin: 0 10px;
            height: 20px;
            width: 38px;
        } 
    }
    .angle {
        display: inline-block;
        transform:rotate(-90deg);
        cursor: pointer;
    }
</style>

